//1.tasks 数据结构
let tasks = [
    { id: 1, text: "睡觉", completed: false },
    { id: 2, text: "吃饭", completed: true },
    { id: 3, text: "刷抖音", completed: false }
];
console.log(tasks);

//2.获取元素
let addBtn = document.querySelector(".addtask .addbtn");
let inputText = document.querySelector(".addtask input");
let ul = document.querySelector(".tasklist ul");
let category = document.querySelector(".category")
let inputSearch = document.querySelector(".search input")


//3. 事件添加

// window onload 事件
window.addEventListener('load', function () {
    // 渲染
    renderTasks(tasks);
    //添加事件
})
// 添加按钮
addBtn.addEventListener('click', function () {
    const taskText = inputText.value.trim();
    if (taskText === "") {
        alert("任务内容不能为空！");
        return;
    }

    const id = tasks[tasks.length - 1]?.id + 1 || 1;
    const task = { id, text: taskText, completed: false };
    tasks.push(task);
    inputText.value = ""; // 清空输入框
    renderTasks(tasks);
});
// category添加事件-filter 判断是哪个按钮--事件委托
category.addEventListener('click', function (e) {
    if (e.target.tagName == "BUTTON") {
        // 获取自定义属性中的值
        const filter = e.target.dataset.filter;
        //渲染
        renderTasks(filterTasks(tasks, filter))
    }
})
// 搜索框enter后触发修改数据
inputSearch.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') {
        const searchValue = inputSearch.value.trim();
        if (searchValue !== "") {
            const searchTasks = tasks.filter(task => task.text.includes(searchValue));
            renderTasks(searchTasks);
        } else {
            renderTasks(tasks); // 恢复原始任务列表
        }
    }
});

// 4.函数：渲染任务列表
function renderTasks(tasks) {
    // 清空任务列表容器
    ul.innerHTML = '';
    // 遍历任务数组，为每个任务创建一个列表项
    tasks.forEach(task => {
        const li = document.createElement('li');
        // 设置列表项的任务ID属性
        li.setAttribute("data-task-id", task.id);

        // 构建列表项的HTML结构，并根据任务完成状态设置不同的样式或属性
        li.innerHTML = `
            <div class="left">
                <input type="checkbox" ${task.completed ? 'checked' : ''} class="task-checkbox">
                <span class="${task.completed ? 'line' : ''}">${task.text}</span>
            </div>
            <div class="btn-group">
                <button class="editBtn">编辑</button>
                <button class="delBtn">删除</button>
            </div>
        `;

        // 获取复选框元素，并为其添加事件监听器，用于更新任务完成状态并重新渲染任务列表
        const checkbox = li.querySelector(".task-checkbox");
        checkbox.addEventListener('change', function () {
            task.completed = this.checked;
            renderTasks(tasks);
        });

        // 获取删除按钮，并为其添加点击事件监听器，用于删除任务
        const delBtn = li.querySelector(".delBtn");
        delBtn.addEventListener('click', function () {
            removeTask(task.id);
        });

        // 获取编辑按钮，并为其添加点击事件监听器，用于编辑任务
        const editBtn = li.querySelector(".editBtn");
        editBtn.addEventListener('click', function () {
            editTask(task.id); // 调用editTask函数进行任务编辑
        });

        // 将构建好的列表项添加到任务列表中
        ul.appendChild(li);
    });

    // 计算任务总数、已完成数和未完成数，并更新底部显示区域的内容
    const all = tasks.length;
    const completed = tasks.filter(task => task.completed).length;
    const uncompleted = all - completed;

    document.querySelector('.footer span:nth-child(1)').textContent = `全部 ${all}`;
    document.querySelector('.footer span:nth-child(2)').textContent = `已完成 ${completed}`;
    document.querySelector('.footer span:nth-child(3)').textContent = `未完成 ${uncompleted}`;
}

// 编辑功能：根据任务ID编辑特定任务
function editTask(id) {
    // 查找对应ID的任务
    const task = tasks.find(task => task.id === id);
    if (!task) return; // 如果找不到该任务，则直接返回
    console.log(task);

    // 找到对应的列表项元素
    const li = document.querySelector(`li[data-task-id="${id}"]`);
    if (!li) return; // 如果找不到对应的列表项，则直接返回

    // 获取任务文本的span元素，并创建新的输入框和保存按钮
    const span = li.querySelector("span");
    const editInput = document.createElement("input");
    editInput.type = "text";
    editInput.value = task.text; // 设置输入框的初始值为当前任务文本
    editInput.classList.add("edit-input");

    const saveBtn = document.createElement("button");
    saveBtn.textContent = "保存";
    saveBtn.classList.add("save-btn");

    // 为保存按钮添加点击事件监听器，用于保存编辑后的任务文本
    saveBtn.addEventListener('click', function () {
        const newText = editInput.value.trim(); // 获取输入框中的新文本并去除首尾空白字符
        if (newText === "") { // 如果新文本为空，给出提示并不执行后续操作
            alert("任务内容不能为空！");
            return;
        }

        // 更新任务文本，并重新渲染任务列表以展示更改
        task.text = newText;
        renderTasks(tasks);
    });

    // 替换任务文本的span元素为输入框，替换编辑按钮为保存按钮
    li.querySelector(".left").replaceChild(editInput, span);
    li.querySelector(".btn-group").replaceChild(saveBtn, li.querySelector(".editBtn"));
}
// 删除功能
function removeTask(id) {
    tasks = tasks.filter(task => task.id !== id);
    renderTasks(tasks);
}
// input :
/*
  功能：分类过滤函数
  输入：tasks-所有任务，filter[all,completed,uncompleted] 
  输出：过滤后的任务
*/
function filterTasks(tasks, filter) {
    switch (filter) {
        case "completed":
            return tasks.filter(task => task.completed);
        case "uncompleted":
            return tasks.filter(task => !task.completed);
        default:
            return tasks;
    }
}



